<template>
  <section class="sketch-picker-container">
    <div
      class="color_con"
      :style="{ background: color }"
      @click="handleShowColor"
    ></div>
    <div class="pickerPanel" v-show="colorShow">
      <sketch-picker v-model="color" @input="updateValue"></sketch-picker>
    </div>
  </section>
</template>
<script>
import { Sketch } from "vue-color";
export default {
  name: "my-sketch-picker",
  components: {
    "sketch-picker": Sketch,
  },
  data() {
    return {
      color: "#000",
      // 颜色选择器
      colorShow: false,
      colors: {
        hex: "#194d33",
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1,
      },
    };
  },
  methods: {
    // 颜色选择器
    handleShowColor() {
      if (this.colorShow) {
        this.colorShow = false;
      } else {
        this.colorShow = true;
      }
    },
    updateValue(val) {
      // console.log("颜色选择", val); // 输出参数如下图1-1
      this.color = val.hex;
      this.$emit("change", val);
    },
  },
  mounted() {
    //输入框外部点击时，关闭选择框
    document.addEventListener("mouseup", (e) => {
      var dom = document.querySelector(".pickerPanel");
      if (dom && !dom.contains(e.target)) {
        this.colorShow = false;
      }
    });
  },
};
</script>
<style lang="less">
.sketch-picker-container {
  .pickerPanel {
    margin-top: 3px;
    position: absolute;
    z-index: 1;
  }

  .color_con {
    cursor: pointer;
    width: 80px;
    height: 20px;
    margin: 0px;
    border-radius: 3px;
  }

  .vc-sketch-field {
    span,
    input {
      color: #000 !important;
    }
  }
}
</style>